<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
</head>
<style>
    .layui-table-cell {
        height: inherit;
    }
</style>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>消费记录</legend>
        <div class="layui-field-box">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-card">
                        <ul class="layui-tab-title">
                            <li class="layui-this">商品费用</li>
                            <li>充值进账</li>
                            <li>打卡支出</li>
                            <li>退回明细</li>
                            <li>扫码买单</li>
                            <li>充值佣金</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table id="demo" lay-filter="demo"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table id="demo2" lay-filter="demo2"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table id="demo3" lay-filter="demo3"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table id="demo4" lay-filter="demo4"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table id="demo5" lay-filter="demo5"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table id="demo6" lay-filter="demo6"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        var $ = layui.$,
                form = layui.form,
                table = layui.table;

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function(data){
            var field = data.field;
            //执行重载
            table.reload('demo', {
                url: "{:url('User/index')}",
                where: field,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        var id = "{$id}";

        //执行渲染
        table.render({
            elem: '#demo',
            url: '/admin/User/user_jilu/type/1/id/' + id,
            method: 'post',
            cols: [[
                {field: 'order', title: '订单号'},
                {title: '消费', templet: function (d){return (Number(d.price) + Number(d.freight)) + ' 元'}},
                {field: 'time', title: '消费时间', templet: function (d){return formatDateTime(d.time);}}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });

        //执行渲染
        table.render({
            elem: '#demo2',
            url: '/admin/User/user_jilu/type/2/id/' + id,
            method: 'post',
            cols: [[
                {field: 'order', title: '订单号'},
                {field: 'money', title: '进账余额', templet: '<div>{{d.money}} 元</div>'},
                {field: 'time', title: '充值时间', templet: function (d){return formatDateTime(d.time);}}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });

        //执行渲染
        table.render({
            elem: '#demo3',
            url: '/admin/User/user_jilu/type/3/id/' + id,
            method: 'post',
            cols: [[
                {field: 'order', title: '订单号'},
                {field: 'money', title: '进账余额', templet: '<div>{{d.money}} 元</div>'},
                {field: 'time', title: '充值时间', templet: function (d){return formatDateTime(d.time);}}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });

        //执行渲染
        table.render({
            elem: '#demo4',
            url: '/admin/User/user_jilu/type/4/id/' + id,
            method: 'post',
            cols: [[
                {field: 'order', title: '订单号'},
                {field: 'money', title: '退回余额', templet: '<div>{{d.money}} 元</div>'},
                {field: 'time', title: '充值时间', templet: function (d){return formatDateTime(d.time);}}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });

        //执行渲染
        table.render({
            elem: '#demo5',
            url: '/admin/User/user_jilu/type/5/id/' + id,
            method: 'post',
            cols: [[
                {field: 'order', title: '订单号'},
                {field: 'money', title: '消费余额', templet: '<div>{{d.money}} 元</div>'},
                {field: 'time', title: '充值时间', templet: function (d){return formatDateTime(d.time);}}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });

        //执行渲染
        table.render({
            elem: '#demo6',
            url: '/admin/User/user_jilu/type/6/id/' + id,
            method: 'post',
            cols: [[
                {field: 'order', title: '订单号'},
                {field: 'money', title: '充值金额', templet: function (d){return (Number(d.num) + Number(d.gold)) + ' 元'}},
                {field: 'time', title: '充值时间', templet: function (d){return formatDateTime(d.time);}}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });
    });

    //php时间戳用js转换为yyyy-mm-dd
    function formatDateTime(timeStamp) {
        var date = new Date();
        date.setTime(timeStamp * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    }

    //补零
    function returnFloat(value){
        value = Math.round(parseFloat(value)*100)/100;
        var xsd = value.toString().split(".");
        if(xsd.length == 1){
            value = value.toString()+".00";
            return value;
        }
        if(xsd.length>1){
            if(xsd[1].length<2){
                value = value.toString()+"0";
            }
            return value;
        }
    }
</script>
</body>
</html>
